<template>
  <div class="w-full pt-[10px]">
    <CustomTitle title="分析项目"></CustomTitle>
    <div class="w-full h-[320px] bg-[#1B1B1B] mt-[10px] rounded-[10px] flex justify-center">
      <div class="w-[1180px]">
        <a-carousel arrows class="w-[1180px] h-full" v-if="!loading">
          <!-- <template #prevArrow>
          <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
            <left-circle-outlined />
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow" style="right: 10px">
            <right-circle-outlined />
          </div>
        </template> -->
          <div class="h-[280px] relative top-[-40px]" v-for="(item, index) in datas" :key="index">
            <div class="h-full grid grid-cols-4 grid-rows-2 px-[10px] pt-[10px]">
              <OverviewItem v-for="(item2, index2) in item" :key="index2" :data="item2" @click="clickItem(item2)" />
            </div>
          </div>
        </a-carousel>
      </div>
      <!-- <div class="flex-grow h-full grid grid-cols-4 grid-rows-2">
        <div class="flex justify-center items-center">
          
        </div>
      </div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
// import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import OverviewItem from './OverviewItem.vue';
import { iAnalysisStatistic } from '@/interface/iAnalysisStatistic';
// import { iAnalysisStatistic } from '@/interface/iAnalysisStatistic';
// import { apiGetAnalysisSampingPoints } from '@/http/api';
// import { iAnalysisSampingPoints } from '@/interface/iAnalysisSampingPoints';
const datas = ref<iAnalysisStatistic['analysis_projects'][]>([]);
// const datas = ref<iAnalysisSampingPoints[]>([]);
const props = defineProps<{ data: iAnalysisStatistic['analysis_projects']; loading: boolean }>();
const emit = defineEmits<{ (event: 'click', data: any): void }>();
const clickItem = (item: any) => {
  emit('click', item);
};
watch(
  () => props.data,
  val => {
    datas.value = [];
    if (val && val.length > 0) {
      for (let i = 0; i <= parseInt(val.length / 8 + ''); i++) {
        let arr = [];
        for (let index = 0; index < (val.length > 8 ? val.length : 8); index++) {
          const element = val[i * 8 + index];
          if (!element) break;
          arr.push(element);
          if (arr.length === 8) break;
        }
        if (arr.length > 0) {
          datas.value.push(arr);
        }
      }
    }
  },
  {
    deep: true,
  }
);
</script>
<style lang="less" scoped>
:deep(.slick-slide) {
  text-align: center;
  height: 320px;
  line-height: 320px;
  //   background: #364d79;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>
